<div class="container justify-content-center mt-3">
    <h1>Create</h1>

    <h4>Movie</h4>
    <hr />

    <div class="row">
        <div class="col-6">
            <div class="form-group">
                <label class="control-label" for="Title">Title</label>
                <input id="createTitle" class="form-control" type="text" data-val="true" data-val-length="The field Title must be a string with a minimum length of 3 and a maximum length of 60." data-val-length-max="60" data-val-length-min="3" data-val-required="The Title field is required." maxlength="60" name="Title" value="" />
                <span class="text-danger field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <label class="control-label" for="Rating">Rating</label>
                <input id="createRating" class="form-control" type="text" data-val="true" data-val-length="The field Rating must be a string with a maximum length of 5." data-val-length-max="5" data-val-regex="The field Rating must match the regular expression &#x27;^[A-Z]&#x2B;[a-zA-Z0-9&quot;&#x27;\s-]*$&#x27;." data-val-regex-pattern="^[A-Z]&#x2B;[a-zA-Z0-9&quot;&#x27;\s-]*$" data-val-required="The Rating field is required." maxlength="5" name="Rating" value="" />
                <span class="text-danger field-validation-valid" data-valmsg-for="Rating" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <label class="control-label" for="ReleaseDate">Release Date</label>
                <input id="createReleaseDate" class="form-control" type="date" data-val="true" data-val-required="The Release Date field is required." name="ReleaseDate" value="" />
                <span class="text-danger field-validation-valid" data-valmsg-for="ReleaseDate" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <label class="control-label" for="Genre">Genre</label>
                <input id="createGenre" class="form-control" type="text" data-val="true" data-val-length="The field Genre must be a string with a maximum length of 30." data-val-length-max="30" data-val-regex="The field Genre must match the regular expression &#x27;^[A-Z]&#x2B;[a-zA-Z&quot;&#x27;\s-]*$&#x27;." data-val-regex-pattern="^[A-Z]&#x2B;[a-zA-Z&quot;&#x27;\s-]*$" data-val-required="The Genre field is required." maxlength="30" name="Genre" value="" />
                <span class="text-danger field-validation-valid" data-valmsg-for="Genre" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <label class="control-label" for="Price">Price</label>
                <input id="createPrice" class="form-control" type="text" data-val="true" data-val-number="The field Price must be a number." data-val-range="The field Price must be between 1 and 100." data-val-range-max="100" data-val-range-min="1" data-val-required="The Price field is required." name="Price" value="" />
                <span class="text-danger field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group mt-3">
                <div>
                    <p>
                        <input type="submit" value="Create" class="btn btn-primary btn-sm" onclick="createMovie(); return false;" /> |
                        <a class="btn btn-light btn-sm" role="button" href="#movies" onclick="navigateTo('/movies'); return false;">Back to List</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>